<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>病历管理</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #f5f5f5;
            border-bottom: 1px solid #ddd;
        }
        .status-item {
            display: flex;
            align-items: center;
        }
        .time {
            font-weight: bold;
        }
        .doctor-info {
            margin-left: 20px;
        }
        .notification {
            position: relative;
            margin-right: 20px;
        }
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: red;
            color: white;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            font-size: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .search-box {
            padding: 5px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .record-container {
            display: flex;
            margin-left: 280px;
            margin-top: 20px;
            margin-right: 20px;
            height: calc(100vh - 100px);
        }
        .patient-sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 200px;
            height: 100vh;
            background: white;
            border-radius: 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 15px;
            margin-right: 20px;
            z-index: 1000;
        }
        .record-content {
            flex: 1;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 20px;
        }
        .mode-selector {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .mode-btn {
            padding: 10px 20px;
            margin: 0 10px;
            background: #2196F3;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .view-mode, .edit-mode {
            display: none;
        }
        .active {
            display: block;
        }
        .section {
            margin-bottom: 20px;
            padding: 15px;
            background: #f5f5f5;
            border-radius: 4px;
        }
        .subsection {
            margin-top: 15px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, textarea, select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .submit-btn {
            padding: 10px 20px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="status-bar">
        <div class="status-item">
            <div style="margin-left: 20px;">
                <span>主治医生: </span>
                <span id="attending-doctor">李医生</span>
            </div>
            <input type="text" class="search-box" placeholder="患者姓名/床号" style="margin-right: 10px;">
            <input type="text" class="search-box" placeholder="搜索床号">
        </div>
        <div class="status-item">
            <div class="time" id="current-time"></div>
            <div class="doctor-info">
                <span id="doctor-name">张医生</span>
                <span id="doctor-department"> - 内科</span>
                <span id="doctor-title"> - 主任医师</span>
            </div>
            <div class="notification">
                <span>🔔</span>
                <span class="notification-badge">3</span>
            </div>
        </div>
    </div>

    <div class="record-container">
        <div class="mode-selector" style="margin-bottom: 20px; display: flex; justify-content: space-between;">
            <button class="mode-btn" onclick="showMode('view')">查看病历</button>
            <button class="mode-btn" onclick="showMode('edit')">编辑病历</button>
            <button class="mode-btn" onclick="showMode('report')">周期报告</button>
        </div>
        <div id="report-mode" class="report-mode" style="display: none; margin-bottom: 20px; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
            <h3 style="margin-top: 0; margin-bottom: 15px;">周期报告</h3>
            <div style="display: flex; gap: 20px;">
                <div style="flex: 1;">
                    <div style="margin-bottom: 20px;">
                        <h4 style="margin-top: 0;">报告时间轴</h4>
                        <div id="report-timeline" style="height: 300px; overflow-y: auto; border: 1px solid #eee; border-radius: 4px; padding: 10px;">
                            <div style="padding: 10px; margin-bottom: 10px; background: #f5f5f5; border-radius: 4px;">
                                <div style="font-weight: bold;">2023-11-15 日报</div>
                                <div style="font-size: 12px; color: #666;">张医生 | 10:30</div>
                                <div style="margin-top: 5px;">患者病情稳定，生命体征正常...</div>
                            </div>
                            <div style="padding: 10px; margin-bottom: 10px; background: #f5f5f5; border-radius: 4px;">
                                <div style="font-weight: bold;">2023-11-14 周报</div>
                                <div style="font-size: 12px; color: #666;">李医生 | 14:15</div>
                                <div style="margin-top: 5px;">本周患者恢复情况良好...</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="flex: 2;">
                    <div style="margin-bottom: 10px;">
                        <select id="report-type" style="padding: 8px 15px; margin-right: 10px; border: 1px solid #ddd; border-radius: 4px;">
                            <option value="daily">日报</option>
                            <option value="weekly">周报</option>
                            <option value="monthly">月报</option>
                        </select>
                        <input type="date" id="report-date" style="padding: 8px 15px; border: 1px solid #ddd; border-radius: 4px;">
                    </div>
                    <div style="margin-bottom: 10px;">
                        <textarea id="report-content" style="width: 100%; height: 300px; padding: 10px; border: 1px solid #ddd; border-radius: 4px;" placeholder="请输入报告内容..."></textarea>
                    </div>
                    <div style="display: flex; justify-content: flex-end; gap: 10px;">
                        <button onclick="generateStandardReport()" style="padding: 8px 15px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">生成标准报告</button>
                        <button onclick="saveReport()" style="padding: 8px 15px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer;">保存报告</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="patient-sidebar">
            <h3 style="margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid #eee;">患者列表</h3>
            <div id="patient-list" style="margin-top: 15px; max-height: calc(100vh - 250px); overflow-y: auto;">
                <div class="patient-item" style="padding: 10px; margin: 5px 0; border-radius: 4px; background: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1);" onclick="selectPatient('张三', '3号床')">
                    <div style="font-weight: bold;">张三</div>
                    <div style="font-size: 12px; color: #666;">3号床 · 心血管疾病</div>
                </div>
                <div class="patient-item" style="padding: 10px; margin: 5px 0; border-radius: 4px; background: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1);" onclick="selectPatient('李四', '5号床')">
                    <div style="font-weight: bold;">李四</div>
                    <div style="font-size: 12px; color: #666;">5号床 · 呼吸系统疾病</div>
                </div>
                <div class="patient-item" style="padding: 10px; margin: 5px 0; border-radius: 4px; background: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1);" onclick="selectPatient('王五', '8号床')">
                    <div style="font-weight: bold;">王五</div>
                    <div style="font-size: 12px; color: #666;">8号床 · 常规检查</div>
                </div>
            </div>
            
            <div style="margin-top: 15px; padding: 10px; background: #f5f5f5; border-radius: 4px;">
                <div>当前患者: <span id="patient-name" style="font-weight: bold;">未选择</span></div>
                <div>床号: <span id="patient-bed">-</span></div>
            </div>
        </div>

        <div class="record-content">


            <div id="view-mode" class="view-mode">
                <div class="section">
                    <h3>症状记录</h3>
                    <div class="subsection">
                        <h4>主观症状</h4>
                        <div id="view-pain-score"></div>
                        <div id="view-symptoms"></div>
                        <div id="view-activity-relation"></div>
                        <div id="view-day-night-change"></div>
                    </div>
                    <div class="subsection">
                        <h4>客观体征</h4>
                        <div id="view-edema"></div>
                        <div id="view-skin"></div>
                        <div id="view-breath-sound"></div>
                        <div id="view-neurological"></div>
                    </div>
                </div>

                <div class="section">
                    <h3>实验室检查</h3>
                    <div class="subsection">
                        <h4>血液检查</h4>
                        <div id="view-blood-test"></div>
                    </div>
                    <div class="subsection">
                        <h4>特殊检查</h4>
                        <div id="view-special-test"></div>
                    </div>
                </div>

                <div class="section">
                    <h3>影像学检查</h4>
                    <div class="subsection">
                        <h4>影像报告</h4>
                        <div id="view-imaging-report"></div>
                    </div>
                </div>

                <div class="section">
                    <h3>治疗干预记录</h3>
                    <div class="subsection">
                        <h4>医疗操作</h4>
                        <div id="view-treatment"></div>
                    </div>
                    <div class="subsection">
                        <h4>护理记录</h4>
                        <div id="view-nursing"></div>
                    </div>
                </div>

                <div class="section">
                    <h3>警报与异常事件</h3>
                    <div class="subsection">
                        <h4>系统警报记录</h4>
                        <div id="view-alerts"></div>
                    </div>
                    <div class="subsection">
                        <h4>临床事件</h4>
                        <div id="view-clinical-events"></div>
                    </div>
                </div>
            </div>

            <div id="edit-mode" class="edit-mode">
                <form id="medical-record-form" onsubmit="return submitMedicalRecord()">
                    <div class="section">
                        <h3>症状记录</h3>
                        <div class="subsection">
                            <h4>主观症状</h4>
                            <div class="form-group">
                                <label for="pain-score">疼痛评分记录（0-10分）</label>
                                <input type="number" id="pain-score" min="0" max="10">
                            </div>
                            <div class="form-group">
                                <label for="symptoms">不适症状描述与频率</label>
                                <textarea id="symptoms" rows="3"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="activity-relation">症状与活动关联性</label>
                                <textarea id="activity-relation" rows="2"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="day-night-change">症状昼夜变化规律</label>
                                <textarea id="day-night-change" rows="2"></textarea>
                            </div>
                        </div>
                        <div class="subsection">
                            <h4>客观体征</h4>
                            <div class="form-group">
                                <label for="edema">水肿程度记录</label>
                                <select id="edema">
                                    <option value="无">无</option>
                                    <option value="轻度">轻度</option>
                                    <option value="中度">中度</option>
                                    <option value="重度">重度</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="skin">皮肤颜色温度变化</label>
                                <textarea id="skin" rows="2"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="breath-sound">呼吸音听诊结果</label>
                                <textarea id="breath-sound" rows="2"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="neurological">神经系统检查</label>
                                <textarea id="neurological" rows="3"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="section">
                        <h3>实验室检查</h3>
                        <div class="subsection">
                            <h4>血液检查</h4>
                            <div class="form-group">
                                <label for="blood-routine">血常规历史对比</label>
                                <textarea id="blood-routine" rows="3"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="liver-kidney">肝肾功能趋势</label>
                                <textarea id="liver-kidney" rows="3"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="electrolyte">电解质变化曲线</label>
                                <textarea id="electrolyte" rows="2"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="inflammation">炎症指标动态</label>
                                <textarea id="inflammation" rows="2"></textarea>
                            </div>
                        </div>
                        <div class="subsection">
                            <h4>特殊检查</h4>
                            <div class="form-group">
                                <label for="cardiac-enzyme">心肌酶谱变化</label>
                                <textarea id="cardiac-enzyme" rows="2"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="tumor-marker">肿瘤标志物趋势</label>
                                <textarea id="tumor-marker" rows="2"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="hormone">内分泌激素水平</label>
                                <textarea id="hormone" rows="2"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="coagulation">凝血功能监测</label>
                                <textarea id="coagulation" rows="2"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="section">
                        <h3>影像学检查</h3>
                        <div class="subsection">
                            <h4>影像报告</h4>
                            <div class="form-group">
                                <label for="imaging-report">X光/CT/MRI报告序列</label>
                                <textarea id="imaging-report" rows="3"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="imaging-analysis">影像变化对比分析</label>
                                <textarea id="imaging-analysis" rows="3"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="imaging-measurement">关键测量数据趋势</label>
                                <textarea id="imaging-measurement" rows="2"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="radiologist-comment">放射科医生评语</label>
                                <textarea id="radiologist-comment" rows="2"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="section">
                        <h3>治疗干预记录</h3>
                        <div class="subsection">
                            <h4>医疗操作</h4>
                            <div class="form-group">
                                <label for="treatment-record">输液输血记录</label>
                                <textarea id="treatment-record" rows="2"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="oxygen-therapy">吸氧治疗参数</label>
                                <textarea id="oxygen-therapy" rows="2"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="physical-therapy">物理治疗次数与效果</label>
                                <textarea id="physical-therapy" rows="2"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="rehabilitation">康复训练进展</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group" style="text-align: center; margin-top: 20px;">
                        <button type="submit" class="submit-btn">保存病历</button>
                    </div>
                </form>
            </div>

            <script>
                function submitMedicalRecord() {
                    // 表单验证
                    const requiredFields = ['pain-score', 'symptoms', 'edema'];
                    let isValid = true;
                    
                    requiredFields.forEach(fieldId => {
                        const field = document.getElementById(fieldId);
                        if (!field.value) {
                            alert(`请填写${field.labels[0].textContent}`);
                            isValid = false;
                            field.focus();
                            return;
                        }
                    });
                    
                    if (!isValid) return false;
                    
                    // 模拟提交
                    alert('病历保存成功！');
                    showMode('view');
                    return false; // 阻止表单默认提交
                }

                function saveReport() {
                    const reportType = document.getElementById('report-type').value;
                    const reportContent = document.getElementById('report-content').value;
                    
                    if (!reportContent) {
                        alert('请填写报告内容');
                        return;
                    }
                    
                    // 这里可以添加保存报告的逻辑，比如发送到服务器
                    alert(`${reportType}保存成功！`);
                }
                
                function showMode(mode) {
                    document.getElementById('view-mode').style.display = 'none';
                    document.getElementById('edit-mode').style.display = 'none';
                    document.getElementById('report-mode').style.display = 'none';
                    
                    if (mode === 'view') {
                        document.getElementById('view-mode').style.display = 'block';
                    } else if (mode === 'edit') {
                        document.getElementById('edit-mode').style.display = 'block';
                    } else if (mode === 'report') {
                        document.getElementById('report-mode').style.display = 'block';
                    }
                }

                function selectPatient(name, bed) {
                    document.getElementById('patient-name').textContent = name;
                    document.getElementById('patient-bed').textContent = bed;
                }
            </script>
            <script>
                // 时间轴数据
                const timelineData = [
                    { time: '2023-11-15 08:00', type: '用药', content: '阿司匹林 100mg', patient: '张三' },
                    { time: '2023-11-15 10:30', type: '检查', content: '血常规检查', patient: '张三' },
                    { time: '2023-11-15 12:00', type: '生命体征', content: '血压 120/80', patient: '张三' },
                    { time: '2023-11-15 14:30', type: '治疗', content: '静脉输液', patient: '张三' },
                    { time: '2023-11-15 16:00', type: '症状', content: '头痛缓解', patient: '张三' }
                ];

                // 初始化时间轴
                function initTimeline() {
                    const timelineEl = document.getElementById('medical-timeline');
                    timelineEl.innerHTML = '';
                    
                    timelineData.forEach(item => {
                        const timelineItem = document.createElement('div');
                        timelineItem.style = 'padding: 10px; margin-bottom: 10px; border-left: 3px solid #2196F3;';
                        timelineItem.innerHTML = `
                            <div style="font-weight: bold;">${item.time} - ${item.type}</div>
                            <div style="margin-left: 10px;">${item.content}</div>
                            <div style="font-size: 12px; color: #666;">患者: ${item.patient}</div>
                        `;
                        timelineEl.appendChild(timelineItem);
                    });
                }

                // 生成报告
                function generateReport(type) {
                    const reportEl = document.getElementById('report-preview');
                    let reportContent = '';
                    
                    if (type === 'daily') {
                        reportContent = `
                            <h4>患者每日报告 - ${new Date().toLocaleDateString()}</h4>
                            <p>关键指标:</p>
                            <ul>
                                <li>血压: 120/80 mmHg</li>
                                <li>心率: 72 bpm</li>
                                <li>血氧: 98%</li>
                            </ul>
                            <p>治疗措施:</p>
                            <ul>
                                <li>阿司匹林 100mg</li>
                                <li>静脉输液 500ml</li>
                            </ul>
                        `;
                    } else if (type === 'weekly') {
                        reportContent = `
                            <h4>患者周度报告 - 第${Math.floor(new Date().getDate() / 7) + 1}周</h4>
                            <p>趋势分析:</p>
                            <ul>
                                <li>血压平均: 118/78 mmHg</li>
                                <li>心率波动: 70-85 bpm</li>
                                <li>症状改善: 头痛缓解50%</li>
                            </ul>
                            <p>风险评估:</p>
                            <ul>
                                <li>心血管风险: 中等</li>
                                <li>药物反应: 良好</li>
                            </ul>
                        `;
                    } else if (type === 'monthly') {
                        reportContent = `
                            <h4>患者月度报告 - ${new Date().getMonth() + 1}月</h4>
                            <p>综合评估:</p>
                            <ul>
                                <li>总体健康状况: 稳定</li>
                                <li>治疗有效性: 80%</li>
                                <li>并发症风险: 低</li>
                            </ul>
                            <p>后续建议:</p>
                            <ul>
                                <li>继续当前治疗方案</li>
                                <li>每月复查血常规</li>
                                <li>调整药物剂量</li>
                            </ul>
                        `;
                    }
                    
                    reportEl.innerHTML = reportContent;
                }

                // 页面加载时初始化
                window.onload = function() {
                    initTimeline();
                };
            </script>